<template>
  <ul class="city_btn_box">
    <li :class="['city_btn',nowBtn===index?'city_show':'']"
        @click="onClickBtn(i,index)"
        v-for="(i,index) in cityList"
        :key="index">{{i.label}}</li>
  </ul>
</template>

<script>
import AreaCode from '../../utils/AreaCode'
export default {
  name: 'CityBtn',
  props: {
    city: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      nowBtn: 0,
      cityList: [],
    }
  },
  watch:{
    city:{
      deep:true,
      handler:function () {
        this.getCity();
        this.onClickBtn(this.cityList[0],0);
      },
      immediate:true
    }
  },
  mounted(){

  },
  methods: {
    onClickBtn(i, index) {
      this.nowBtn = index
      this.$emit('changeBtn', {lable:i.label,city:i.value})
    },
    getCity() {
      AreaCode.AreaZJ[0].children.forEach((i, index) => {
        if (i.label === this.city) {
          this.cityList = i.children
          //console.log(i.children)
        }
      })
    },
  },
}
</script>

<style scoped>
.city_btn_box {
  padding: 10px 0 10px 10px;
  width: 100%;
  height: calc(100% - 35px);
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  overflow: hidden;
  overflow-y: auto;
}
.city_btn_box::-webkit-scrollbar{
  width: 10px;
  border-radius: 10px;
  background-color: rgba(201, 216, 246, 0.9);
}
.city_btn_box::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122,153,217)), color-stop(0.72, rgb(73,125,189)), color-stop(0.86, rgb(55, 83, 167)));
}
.city_btn_box::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  /* background-color: #F5F5F5; */
  border-radius: 10px;
}
.city_btn {
  width: 98px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  background-image: linear-gradient(to left top, #194483, #229bd2);
  color: #fff;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 12px;
}
.city_btn:hover {
  border: 1px solid #fff;
  line-height: 28px;
}
.city_show {
  border: 1px solid #fff;
  line-height: 28px;
}
</style>